<template>
	<div class="padding-lr-xs">
		<a-form v-if="!~['bpmn:CallActivity', 'bpmn:SubProcess'].indexOf(formData.type)">
			<a-divider><span class="text-bold">节点人员</span></a-divider>
			<a-form-item class="label-width" v-if="formData.type == 'bpmn:UserTask'" label="">
				<a-radio-group default-value="processInitiator" size="small" v-model="formData.userType" @change="changeUserType">
					<a-radio value="assignee">
						指定人员
					</a-radio>
					<a-radio value="candidateUsers">
						候选人员
					</a-radio>
					<a-radio value="candidateGroups">
						指定角色
						<a-tooltip placement="bottomRight" overlayClassName="custom-tip">
							<template slot="title">
								<div style="display: flex;">
									<div>
										<h3>什么是角色？</h3>
										<p style="margin-bottom: 8px;">角色指团队成员的专业分工类别，如人事、行政、财务等，每类角色可由 1 位或多位成员组成。</p>
										<h3>如何使用角色？</h3>
										<p>用角色作为审批人，当有成员离职变动时，该角色中的其他成员可继续完成审批，从而避免审批流程失效的情况。</p>
										<p>提示：若选择的角色中包含多名成员，则角色中所有成员成为审批人。</p>
									</div>
								</div>
							</template>
							<a-icon type="question-circle" />
						</a-tooltip>
					</a-radio>
					<a-radio value="processInitiator">
						流程发起人
						<a-tooltip placement="bottomRight">
							<template slot="title">
								将发起人本人设置为审批人，可用于需要发起人进行信息复核的场景
							</template>
							<a-icon type="question-circle" />
						</a-tooltip>
					</a-radio>
					<a-radio value="department">
						岗位
					</a-radio>
					<a-radio value="departmentHead">
						部门主管
					</a-radio>
					<a-radio value="continuousMultiLevelSupervisor">
						连续多级主管
					</a-radio>
					<a-radio value="reportsTo">
						直属主管
					</a-radio>
					<a-radio value="departmentContactPerson">
						部门接口人
						<a-tooltip placement="bottomRight" overlayClassName="custom-tip">
							<template slot="title">
								<div style="display: flex;">
									<div>
										<h3>什么是部门接口人？</h3>
										<p style="margin-bottom: 8px;">这里指在平台管理 - 接口人设置中所设置的部门联系人。</p>
										<h3>部门接口人与部门主管的区别？</h3>
										<p>一个部门内可能存在多层的上下级关系，但通常有指定的部门接口人（联系人）。由部门接口人审批，则不涉及上下级关系，直接由该固定人员进行审批。</p>
									</div>
								</div>
							</template>
							<a-icon type="question-circle" />
						</a-tooltip>
					</a-radio>
					<a-radio value="selectedByTheInitiator">
						发起人自选
					</a-radio>
					<a-radio value="thirdPartyServices">
						第三方服务
					</a-radio>
					<a-radio value="memberFieldsInTheForm">
						表单内成员字段
					</a-radio>
				</a-radio-group>
			</a-form-item>
			<!-- 指定人员 -->
			<a-form-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				label="指定人员"
				v-if="formData.type == 'bpmn:UserTask' && formData.userType === 'assignee'"
			>
				<a-input key="1" v-model="formData.assigneeName" placeholder="请选择" @change="
	          (e) =>
	            setUser({
	              assignee: formData.assigneeName,
	              assigneeName: formData.assigneeName,
	            })
	        ">
					<a-icon slot="addonAfter" type="user" @click="() => (isUserPopup = true)" />
				</a-input>
				<user-popup :visible="isUserPopup" style="width: 100%;" :typeForm="true" :typeNum="1"
					@change="(value) => addUser(value, 1)" @close="() => (isUserPopup = false)" />
			</a-form-item>
			<!-- 候选人员 -->
			<a-form-item 
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				label="候选人员"
				v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'candidateUsers'"
			>
				<a-input @click="() => (isUserPopups = true)" key="2" v-model="formData.candidateUsersName"
					placeholder="请选择" @change="
	          (e) =>
	            setUser({
	              candidateUsers: formData.candidateUsersName,
	              candidateUsersName: formData.candidateUsersName,
	            })
	        ">
					<a-icon slot="addonAfter" type="user" @click="() => (isUserPopups = true)" />
				</a-input>
				<user-popup :userList="formData.candidateUsers" :visible="isUserPopups" style="width: 100%;"
					:typeNum="2" @change="(value) => addUser(value, 2)" @close="() => (isUserPopups = false)" />
			</a-form-item>
			<!-- 指定角色 -->
			<template v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'candidateGroups'">
				<a-form-item
					:labelCol="labelCol"
					:wrapperCol="wrapperCol"
					label="指定角色"
				>
					<a-input key="3" v-model="formData.candidateGroupsName" placeholder="请选择" @change="
				      (e) =>
				        setUser({
				          candidateGroups: formData.candidateGroupsName,
				          candidateGroupsName: formData.candidateGroupsName,
				        })
				    ">
						<a-icon slot="addonAfter" type="user" @click="() => (isUserPopups = true)" />
					</a-input>
					<role-popup :userList="formData.candidateGroups" :visible="isUserPopups" style="width: 100%;"
						:typeNum="2" @change="(value) => addUser(value, 3)" @close="() => (isUserPopups = false)" />
				</a-form-item>
				<a-form-item label="多人审批方式">
					<a-radio-group>
						<a-radio :style="radioStyle" :value="1">
							会签（需所有审批人同意）
						</a-radio>
						<a-radio :style="radioStyle" :value="2">
							或签（一名审批人同意即可）
							<a-tooltip>
								<template slot="title">
									当或签时，多个审批人会同时收到审批通知，第一个提交审批结果的审批人会决定最终的审批结果。若同意即通过，若拒绝则终止。
								</template>
								<a-icon type="question-circle" />
							</a-tooltip>
						</a-radio>
						<a-radio :style="radioStyle" :value="3">
							依次审批（按顺序依次审批）
						</a-radio>
					</a-radio-group>
				</a-form-item>
			</template>
			<!-- 流程发起人 -->
			<a-form-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				label="流程发起人"
				v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'processInitiator'"
			>
				<a-input v-model="formData.processInitiator" :default-value="'${startUserNameId}'" disabled></a-input>
			</a-form-item>
			<!-- 岗位 -->
			<a-form-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				label="岗位" v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'department'"
			>
				<a-input key="3" v-model="formData.candidateGroupsName" placeholder="请选择" @change="
	          (e) =>
	            setUser({
	              candidateGroups: formData.candidateGroupsName,
	              candidateGroupsName: formData.candidateGroupsName,
	            })
	        ">
					<a-icon slot="addonAfter" type="user" @click="() => (isUserPopups = true)" />
				</a-input>
				<t-department :userList="formData.candidateGroups" :visible="isUserPopups" style="width: 100%;"
					:typeNum="2" @change="(value) => addUser(value, 4)" @close="() => (isUserPopups = false)" />
			</a-form-item>
			<!-- 部门主管 -->
			<template v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'departmentHead'">
				<a-form-item
					:labelCol="labelCol"
					:wrapperCol="wrapperCol"
					label="选择部门主管"
				>
					<a-select default-value="1" style="width: 120px">
						<a-select-option value="1">
							发起人
						</a-select-option>
					</a-select>
					的
					<a-select default-value="1" style="width: 120px">
						<a-select-option value="1">
							一级主管
						</a-select-option>
						<a-select-option value="2">
							二级主管
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="部门过滤">
					<a-radio-group>
						<a-radio :value="1">
							所有部门
						</a-radio>
						<a-radio :value="2">
							跳过无主管的部门
							<a-tooltip placement="bottomRight" overlayClassName="custom-tip">
								<template slot="title">
									<div style="display: flex;">
										<div>
											<h3>跳过无主管的部门</h3>
											<p>从发起人（或表单成员字段）所在部门开始往上找有主管的第N级部门的主管，无主管的部门跳过不计数。</p>
											<p>例如右图：选择发起人的第2级主管。</p>
										</div>
										<div>
											<img style="width: 250px;" src="https://img.alicdn.com/imgextra/i3/O1CN01a3jVZt1SGnxRNjvQA_!!6000000002220-2-tps-514-372.png" alt="">
										</div>
									</div>
								</template>
								<a-icon type="question-circle" />
							</a-tooltip>
						</a-radio>
						<a-radio :style="radioStyle" :value="3">
							依次审批（按顺序依次审批）
						</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item label="多人审批方式">
					<a-radio-group>
						<a-radio :style="radioStyle" :value="1">
							会签（需所有审批人同意）
						</a-radio>
						<a-radio :style="radioStyle" :value="2">
							或签（一名审批人同意即可）
							<a-tooltip>
								<template slot="title">
									当或签时，多个审批人会同时收到审批通知，第一个提交审批结果的审批人会决定最终的审批结果。若同意即通过，若拒绝则终止。
								</template>
								<a-icon type="question-circle" />
							</a-tooltip>
						</a-radio>
						<a-radio :style="radioStyle" :value="3">
							依次审批（按顺序依次审批）
						</a-radio>
					</a-radio-group>
				</a-form-item>
			</template>
			<template v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'continuousMultiLevelSupervisor'">
				<a-form-item label="审批终点">
					<a-radio-group v-model="approvalEndPointValue" @change="approvalEndPointChange">
						<a-radio :style="radioStyle" :value="1">
							指定角色（同时是主管线上的主管）
							<a-input :disabled="approvalEndPointValue !== 1" style="width: 160px;" @click.stop="() => (isUserPopups = true)" key="2" v-model="formData.candidateUsersName"
								placeholder="请选择" @change="
							    (e) =>
							      setUser({
							        candidateUsers: formData.candidateUsersName,
							        candidateUsersName: formData.candidateUsersName,
							      })
							  ">
								<a-icon slot="addonAfter" type="user" @click.stop="() => (isUserPopups = true)" />
							</a-input>
							<user-popup :visible="isUserPopups" style="width: 100%;" :typeForm="true" :typeNum="1"
								@change="(value) => addUser(value, 1)" @close="() => (isUserPopups = false)" />
						</a-radio>
						<a-checkbox v-model="approvalEndPointSecondLevelValue" :disabled="approvalEndPointValue !== 1" style="margin-left: 30px;">
							同时不超过发起人向上的
							<a-select :disabled="!approvalEndPointSecondLevelValue" default-value="1" style="width: 160px">
								<a-select-option value="1">
									一级主管
								</a-select-option>
								<a-select-option value="2">
									二级主管
								</a-select-option>
							</a-select>
						</a-checkbox>
						<a-radio :style="radioStyle" :value="2">
							通讯录中的
							<a-select :disabled="approvalEndPointValue !== 2" default-value="1" style="width: 160px">
								<a-select-option value="1">
									最高级主管
								</a-select-option>
								<a-select-option value="2">
									一级主管
								</a-select-option>
								<a-select-option value="3">
									二级主管
								</a-select-option>
							</a-select>
						</a-radio>
					</a-radio-group>
				</a-form-item>
			</template>
			<template v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'reportsTo'">
				<a-form-item
					:labelCol="labelCol"
					:wrapperCol="wrapperCol"
					label="选择直属主管"
				>
					<a-select default-value="1" style="width: 120px">
						<a-select-option value="1">
							发起人
						</a-select-option>
					</a-select>
					的
					<a-select default-value="1" style="width: 120px">
						<a-select-option value="1">
							一级主管
						</a-select-option>
						<a-select-option value="2">
							二级主管
						</a-select-option>
					</a-select>
					<a-checkbox>
						找不到直属主管时，由部门主管代审批
					</a-checkbox>
				</a-form-item>
			</template>
			<template v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'departmentContactPerson'">
				<a-form-item
					:labelCol="labelCol"
					:wrapperCol="wrapperCol"
					label="选择部门接口人"
				>
					<a-select default-value="1" style="width: 120px">
						<a-select-option value="1">
							发起人
						</a-select-option>
					</a-select>
					的
					<a-select default-value="1" style="width: 120px">
						<a-select-option value="1">
							一级主管
						</a-select-option>
						<a-select-option value="2">
							二级主管
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="多人审批方式">
					<a-radio-group>
						<a-radio :style="radioStyle" :value="1">
							会签（需所有审批人同意）
						</a-radio>
						<a-radio :style="radioStyle" :value="2">
							或签（一名审批人同意即可）
							<a-tooltip>
								<template slot="title">
									当或签时，多个审批人会同时收到审批通知，第一个提交审批结果的审批人会决定最终的审批结果。若同意即通过，若拒绝则终止。
								</template>
								<a-icon type="question-circle" />
							</a-tooltip>
						</a-radio>
						<a-radio :style="radioStyle" :value="3">
							依次审批（按顺序依次审批）
						</a-radio>
					</a-radio-group>
				</a-form-item>
			</template>
			<template v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'selectedByTheInitiator'">
				<a-form-item label="发起人自选">
					<a-radio-group :default-value="1">
						<a-radio :value="1">
							全公司
						</a-radio>
						<a-radio :value="2">
							指定成员
						</a-radio>
						<a-radio :value="3">
							指定角色
						</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item label="多人审批方式">
					<a-radio-group>
						<a-radio :style="radioStyle" :value="1">
							会签（需所有审批人同意）
						</a-radio>
						<a-radio :style="radioStyle" :value="2">
							或签（一名审批人同意即可）
							<a-tooltip>
								<template slot="title">
									当或签时，多个审批人会同时收到审批通知，第一个提交审批结果的审批人会决定最终的审批结果。若同意即通过，若拒绝则终止。
								</template>
								<a-icon type="question-circle" />
							</a-tooltip>
						</a-radio>
						<a-radio :style="radioStyle" :value="3">
							依次审批（按顺序依次审批）
						</a-radio>
					</a-radio-group>
				</a-form-item>
			</template>
			<template v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'thirdPartyServices'">
				<a-form-item
					:labelCol="labelCol"
					:wrapperCol="wrapperCol"
					label="选择第三方服务"
				>
					<a-select style="width: 100%" placeholder="请选择第三方服务">
						
					</a-select>
				</a-form-item>
				<a-form-item label="多人审批方式">
					<a-radio-group>
						<a-radio :style="radioStyle" :value="1">
							会签（需所有审批人同意）
						</a-radio>
						<a-radio :style="radioStyle" :value="2">
							或签（一名审批人同意即可）
							<a-tooltip>
								<template slot="title">
									当或签时，多个审批人会同时收到审批通知，第一个提交审批结果的审批人会决定最终的审批结果。若同意即通过，若拒绝则终止。
								</template>
								<a-icon type="question-circle" />
							</a-tooltip>
						</a-radio>
						<a-radio :style="radioStyle" :value="3">
							依次审批（按顺序依次审批）
						</a-radio>
					</a-radio-group>
				</a-form-item>
			</template>
			<template v-else-if="formData.type == 'bpmn:UserTask' && formData.userType === 'memberFieldsInTheForm'">
				<a-form-item
					:labelCol="labelCol"
					:wrapperCol="wrapperCol"
					label="选择表单成员字段"
				>
					<a-select style="width: 100%" placeholder="请选择表单成员字段">
						<a-select-option value="1">
							发起人
						</a-select-option>
					</a-select>
				</a-form-item>
			</template>
		</a-form>
	</div>
</template>

<script>
	import userPopup from '@/components/TopVUI/custom/userPopup';
	import rolePopup from '@/components/TopVUI/custom/rolePopup';
	import TDepartment from '@/components/TopVUI/custom/TDepartment';
	import buttonPopup from './modal/buttonModal.vue';
	import multiInstance from './modal/multiInstance.vue';
	import tableForm from './modal/tableForm.vue';
	import conditions from './modal/conditions.vue';
	export default {
		name: "NodeBasicConfig",
		components: {
			userPopup,
			buttonPopup,
			multiInstance,
			rolePopup,
			TDepartment,
			tableForm,
			conditions,
		},
		props: {
			modeler: {
				type: Object,
				required: true
			},
			nodeElement: {
				type: Object,
				required: true
			},
			formData: {
				type: Object,
				required: true
			},
			formFieldLists: {
				type: Array
			},
			updateList: {
				type: Array
			}
		},
		data() {
			return {
				isUserPopup: false,
				isUserPopups: false,
				visible: false,
				type: 0,
				radioStyle: {
					display: 'block',
					height: '30px',
					lineHeight: '30px',
				},
				labelCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 7,
					},
				},
				wrapperCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 17,
					},
				},
				approvalEndPointValue: 1,
				approvalEndPointSecondLevelValue: false
			}
		},
		watch: {
			nodeElement: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					if (this.nodeElement.type == "bpmn:StartEvent") {
						this.updateName("开始");
					}
					if (this.nodeElement.type == "bpmn:EndEvent") {
						this.updateName("结束");
					}
				}
			},
			'formData.async': function(val) {
				if (val === '') val = null
				this.updateProperties({
					'flowable:async': val
				})
				this.$emit('setFormBtnData', 'async', val);
			},
			'formData.isForCompensation': function(val) {
				if (val === '') val = null
				this.updateProperties({
					'isForCompensation': val
				})
				this.$emit('setFormBtnData', 'isForCompensation', val);
			},
			'formData.ruleVariablesInput': function(val) {
				if (val === '') val = null
				this.updateProperties({
					'flowable:ruleVariablesInput': val
				})
				this.$emit('setFormBtnData', 'ruleVariablesInput', val);
			},
			'formData.rules': function(val) {
				if (val === '') val = null
				this.updateProperties({
					'flowable:rules': val
				})
				this.$emit('setFormBtnData', 'rules', val);
			},
			'formData.resultVariable': function(val) {
				if (val === '') val = null
				this.updateProperties({
					'flowable:resultVariable': val
				})
				this.$emit('setFormBtnData', 'resultVariable', val);
			},
			'formData.exclude': function(val) {
				if (val === '') val = null
				this.updateProperties({
					'flowable:exclude': val
				})
				this.$emit('setFormBtnData', 'exclude', val);
			},
			'formData.autoStoreVariables': function(val) {
				if (val === '') val = null
				this.updateProperties({
					'flowable:autoStoreVariables': val
				})
				this.$emit('setFormBtnData', 'autoStoreVariables', val);
			},
			'formData.triggerable': function(val) {
				if (val === '') val = null
				this.updateProperties({
					'flowable:triggerable': val
				})
				this.$emit('setFormBtnData', 'triggerable', val);
			},
			'formData.skipExpression': function(val) {
				if (val === '') val = null
				this.updateProperties({
					'flowable:skipExpression': val
				})
				this.$emit('setFormBtnData', 'skipExpression', val);
			},
			'formData.formModuleType': function(val) {
				if (val === '') val = null
				this.updateProperties({
					'formModuleType': val
				})
				this.$emit('setFormBtnData', 'formModuleType', val);
			}
		},
		methods: {
			getFomatar(e) {
				return Boolean(e)
			},
			updateProperties(properties) {
				this.modeler.get("modeling").updateProperties(this.nodeElement, properties);
			},
			updateName(name) {
				this.updateProperties({
					name: name
				});
			},
			// 节点处理人类型
			changeUserType(e) {
				this.isUserPopup = false
				this.updateProperties({
					userType: e.target.value
				});
				this.$emit('modifyFormData', {
					userType: e.target.value
				});
				if (e.target.value === 'processInitiator') {
					this.addUser(e.target.value, 0)
				}
			},
			// 设置节点处理人
			setUser(properties) {
				this.updateProperties(properties);
				Object.assign(properties, {
					userType: Object.keys(properties)[0]
				});
				this.$emit('modifyFormData', properties);
			},
			// 设置节点处理人
			addUser(properties, type) {
				if (this.nodeElement.businessObject?.processInitiator) delete this.nodeElement.businessObject.processInitiator
				if (this.nodeElement.businessObject?.assignee) delete this.nodeElement.businessObject.assignee
				if (this.nodeElement.businessObject?.assigneeName) delete this.nodeElement.businessObject.assigneeName
				if (this.nodeElement.businessObject?.candidateUsers) delete this.nodeElement.businessObject.candidateUsers
				if (this.nodeElement.businessObject?.candidateUsersName) delete this.nodeElement.businessObject.candidateUsersName
				if (this.nodeElement.businessObject?.candidateGroups) delete this.nodeElement.businessObject.candidateGroups
				if (this.nodeElement.businessObject?.candidateGroupsName) delete this.nodeElement.businessObject.candidateGroupsName
				if (properties === 'processInitiator') {
					properties = {
						userType: 'processInitiator',
						processInitiator: '${startUserNameId}',
						assignee: '${startUserNameId}',
					}
				} else {
					var ret = {
						1: {
							userType: 'assignee',
							assignee: properties.userNameId,
							assigneeName: properties.userName
						},
						2: {
							userType: 'candidateUsers',
							candidateUsers: properties.userNameId,
							candidateUsersName: properties.userName
						},
						3: {
							userType: 'candidateGroups',
							candidateGroups: properties.uuid,
							candidateGroupsName: properties.userName
						},
						4: {
							userType: 'department',
							candidateGroups: properties.value,
							candidateGroupsName: properties.text
						}
					};
					properties = ret[type] ? ret[type] : '';
				}
				this.updateProperties(properties);
				this.$emit('modifyFormData', properties);
			},
			approvalEndPointChange(e){
				
			}
		}
	}
</script>

<style lang="less">
	.label-width label{
		width: 130px;
	}
	.custom-tip{
		max-width: 600px !important;
		p{
			color: #000;
		}
		.ant-tooltip-arrow::before{
			background-color: #fff !important;
		}
		.ant-tooltip-inner{
			background-color: #fff !important;
		}
	}
</style>
